<template>
  <div>
    <div class="topheader">
      <div class="img">
        <img :src="playlist.coverImgUrl" alt="" />
      </div>
      <div class="title">
        {{ playlist.name }}
      </div>
      <div class="button" @click="$router.go(-1)">
        <div>
          <span class="iconfont icon-arrow-left-bold"></span>
          歌单
        </div>
      </div>
      <div class="recomm">
        <img :src="playlist.coverImgUrl" alt="" />
        <div>
          <a class="iconfont icon-monitor"></a>
          <span class="remd_lnum">{{ playlist.playCount | playCountA }}</span>
        </div>
      </div>
      <div class="author">
        <img :src="playlist.creator.avatarUrl" alt="" />
        <span>{{ playlist.creator.nickname }}</span>
      </div>
      <div class="label" v-if="playlist.tags.length">
        <span class="labe">标签:</span><span><p v-for="(item, index) in playlist.tags" :key="index">{{ item }}</p></span>
      </div>  
    </div>
    <dl class="musiclist">
      <dt>
        <span class="iconfont icon-bofang"></span>
        播放全部 <span>&nbsp;&nbsp;(共{{ playlist.tracks.length }}首)</span>
      </dt>
      <dd
        v-for="(item, index) in playlist.tracks"
        :key="index"
        @click="playmusic(item.id, item.name, item.ar, item.al.picUrl)"
      >
        <h1>{{ index + 1 }}</h1>
        <div class="info">
          <h2>{{ item.name }}</h2>
          <h3>
            <span v-for="(key, i) in item.ar" :key="i">{{
              item.ar.length > 1
                ? key.name + "&nbsp;&nbsp;/&nbsp;&nbsp;"
                : key.name
            }}</span>
          </h3>
          <div class="musicPlay">
            <span class="iconfont icon-bofang"></span>
          </div>
        </div>
      </dd>
    </dl>
    <div class="comment" v-if="Comment.comments.length">
      <dl>
        <dt v-if="Comment.hotComments.length">
          <span class="iconfont icon-pinglun"></span>
          热门评论 <span>&nbsp;&nbsp;(共{{Comment.hotComments.length}}条)</span>
        </dt>
        <dd v-for="(key,i) in Comment.hotComments" :key = "i">
          <h1>
              <img :src="key.user.avatarUrl" alt="">
          </h1>
          <div class="info">
              
            <h2>
                <p>{{key.user.nickname}}</p>
            </h2>
            <h3>
                {{key.content}}
            </h3>
          </div>
        </dd>
        
      </dl>
      <hr>
        <dt >
          <span class="iconfont icon-pinglun"></span>
          精选评论 <span>&nbsp;&nbsp;(共{{Comment.comments.length}}条)</span>
        </dt>
        <dd v-for="(item,index) in Comment.comments" :key = "index">
          <h1>
              <img :src="item.user.avatarUrl" alt="">
          </h1>
          <div class="info">
              
            <h2>
                <p>{{item.user.nickname}}</p>
            </h2>
            <h3>
                {{item.content}}
            </h3>
          </div>
        </dd>
      <dl>

      </dl>
    </div>
  </div>
</template>

<script>
import { getDetail, getComment } from "../../api/recommend"; //
export default {
  data() {
    return {
      playlist: {
        tracks: [],
        creator: {
          avatarUrl: "",
        },
        tags:[]
      },
      Comment:{
          hotComments:[],
          comments:[]
      },
    };
  },
  methods: {
    getDetailFun() {
      let id = this.$route.query.id;
      if (id) {
        getDetail({ id: id }).then((data) => {
          console.log(data);
          this.playlist = data.playlist;
        });
      } else {
        return;
      }
      // console.log(this.$route);
    },
    playmusic(id, name, ar, coverImgUrl) {
      let playMusicData = {
        coverImgUrl,
        id,
        name,
        ar,
        tracks: this.playlist.tracks,
      };
      // 数据存储
      // this.resetSetItem.save(playMusicData);
      this.$store.commit("musicDataFun",playMusicData);
      let musiclistts = JSON.parse(JSON.stringify(playMusicData));
      this.$store.commit("musiclisttsFun",musiclistts)
    },
    getCommentFun() {
      getComment({ id: this.$route.query.id, limit: 10 }).then((data) => {
        console.log("评论", data);
        this.Comment = data
      });
    },
  },
  created() {
    this.getDetailFun();
    this.getCommentFun();
  },
  filters: {
    playCountA(value) {
      if (value>10000) {
          let w = value>1000?value/10000:value;//万计算
          let y = w >10000 ? parseInt(w/10000) + "亿" : parseInt(w) + "万"; //亿计算
          return y ;                    
      }else{
          return value
      }
    },
  },
};
</script>

<style lang="less" scoped>
.topheader {
  width: 100%;
  height: 463px;
  position: relative;
  .img {
    width: 100%;
    height: 463px;

    img {
      width: 100%;
      filter: blur(15px);
    }
  }
  .title {
    position: absolute;
    left: 32px;
    top: 80px;
    font-size: 32px;
    font-weight: normal;
    color: #373737;
    height: 38px;
    overflow: hidden;
  }
  .button {
    position: absolute;
    color: #000;
    left: 25px;
    top: 26px;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    span {
      display: inline-block;
      font-size: 40px;
      vertical-align: middle;
    }
  }
  .author {
    position: absolute;
    left: 250px;
    top: 200px;
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    span {
      vertical-align: middle;
      font-size: 15px;
      display: inline-block;
      text-indent: 1em;
      color: #e2dde1;
    }
  }
  .label {
    position: absolute;
    left: 260px;
    top: 250px;
    width: 150px;
    span {
      // float: right;
      display: inline-block;
      margin-top: 10px;
    }
    p {
      text-indent: 1em;
      line-height: 40px;
      color: #507daf;
      font-weight: bold;
    }
    .labe {
      float: left;
    }
  }
  .recomm {
    position: absolute;
    left: 40px;
    top: 200px;
    color: #fff;
    img {
      width: 200px;
      height: 200px;
    }
    div {
      position: absolute;
      left: 0px;
      top: 8px;
      width: 200px;
      background-color: rgba(38, 38, 38, 0.2);
      font-size: 15px;
      .iconfont {
        color: #fff;
        font-size: 25px;
      }
    }
  }
}
.musiclist {
  border-radius: 12px;
  background-color: #fff;
  position: relative;
  top: -12px;
  min-height: 200px;
  dt {
    height: 61px;
    line-height: 61px;
    border-bottom: 1px solid #e2e2e2;
    font-size: 25px;
    color: #131615;
    text-indent: 1.5em;
    span {
      font-size: 20px;
      color: #616262;
      vertical-align: middle;
      line-height: 61px;
    }
    .iconfont {
      font-size: 45px;
      margin-right: 10px;
    }
  }
  dd {
    border-bottom: 1px solid #e2e2e2;
    display: flex;
    position: relative;
    h1 {
      flex: 0 0 78px;
      line-height: 91px;
      text-align: center;
      font-size: 28px;
      color: #707271;
      font-weight: normal;

    }
    .info {
      flex: 1;
      height: 100%;
      // position: relative;
      h2 {
        display: inline-block;
        font-size: 25px;
        color: #3a3c3c;
        margin-top: 18px;
        font-weight: normal;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 400px;
      }
      h3 {
        display: inline-block;
        font-size: 20px;
        margin-top: 10px;
        color: #777978;
        font-weight: normal;
        position: absolute;
        left: 78px;
        bottom: 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 400px;
      }
      .musicPlay {
        // display: inline-block;
        position: relative;
        right: 50px;
        bottom: -15px;
        float: right;
        span {
          font-size: 50px;
        }
      }
    }
  }
}
.comment {
  border-radius: 12px;
  background-color: #fff;
  position: relative;
  top: 40px;
  min-height: 200px;
  dt {
    height: 61px;
    line-height: 61px;
    border-bottom: 1px solid #e2e2e2;
    font-size: 25px;
    color: #131615;
    text-indent: 1.5em;
    span {
      font-size: 20px;
      color: #616262;
      vertical-align: middle;
      line-height: 61px;
    }
    .iconfont {
      font-size: 45px;
      margin-right: 10px;
    }
  }
  dd {
    border-bottom: 1px solid #e2e2e2;
    display: flex;
    position: relative;
    background-color: rgba(38, 38, 38, 0.2);
    h1 {
      flex: 0 0 78px;
      line-height: 91px;
    //   text-align: center;
      font-size: 28px;
      color: #707271;
      font-weight: normal;
    //   text-indent: 1.5em;
      margin:   20px  ;
    img{
          width: 100%;
        //   height: 50px;
          vertical-align: middle;
          border-radius: 50%;
      }
    }
    .info {
      flex: 1;
    //   height: 100%;
      // position: relative;
      
      h2 {
        // display: inline-block;
        font-size: 25px;
        color: #3a3c3c;
        margin-top: 18px;
        font-weight: normal;
        // overflow: hidden;
        // white-space: nowrap;
        // text-overflow: ellipsis;
        width: 400px;
      }
      h3 {
        // display: inline-block;
        font-size: 20px;
        margin-top: 10px;
        color: #777978;
        font-weight: normal;
        // position: absolute;
        // left: 78px;
        // bottom: 10px;
        // white-space: nowrap;
        // text-overflow: ellipsis;
        // overflow: hidden;
        // width: 400px;
      }
    }
  }
}
</style>